import { Card, Descriptions } from 'antd'
import { React, useEffect, useState } from 'react'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import { ipList as presentIp } from '../../ipConfig'

function Rent() {
  const [data, setData] = useState({
    rentalAll: 0,
    prepaidRentalAll: 0,
    unpaidRentalAll: 0,
    rentChangeInWeek: [],
  })

  useEffect(() => {
    let url = `${presentIp.DEV_IP}/rental_dealing`
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        setData(json.data)
      })
  }, [])

  useEffect(() => {
    if (data) {
      document.getElementById('rent').innerHTML = ''
      draw(data.rentChangeInWeek)
    }
  }, [data])
  const draw = (drawData) => {
    const chart = new Chart({
      container: 'rent',
      autoFit: true,
      height: 440,
      padding: [1, 2, 1, 2],
    })

    chart.scale('week', {
      range: [0.1, 0.9],
    })
    chart.scale({
      range: {
        nice: true,
        sync: true,
        range: [0.1, 0.9],
      },
      value: {
        nice: true,
        sync: true,
        range: [0.1, 0.9],
      },
    })
    chart.axis(false)
    chart.legend(false)
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    })

    const ds = new DataSet()

    // view1
    const dv = ds
      .createView()
      .source(drawData)
      .transform({
        type: 'map',
        callback(row) {
          row.range = [row.prepaidRental, row.totalRentInWeek]
          return row
        },
      })
    const view1 = chart.createView({})
    view1.data(dv.rows)

    view1.tooltip(false)
    view1
      .area()
      .position('week*range')
      .color('#f00')
      .style({
        fillOpacity: 0.1,
      })
      .shape('smooth')

    // view2
    const dv2 = ds
      .createView()
      .source(drawData)
      .transform({
        type: 'rename',
        map: {
          totalRentInWeek: '租金',
          prepaidRental: '实收租金',
        },
      })
      .transform({
        type: 'fold',
        fields: ['租金', '实收租金'],
        key: 'type',
        value: 'value',
        retains: ['week'],
      })

    const view2 = chart.createView({})
    view2.data(dv2.rows)

    view2.line().position('week*value').color('type').shape('smooth')

    chart.removeInteraction('legend-filter') // 关闭图例过滤交互

    chart.render()
  }

  return (
    <>
      <Card
        title="租金总览"
        bordered={false}
        size="small"
        style={{
          width: '100%',
          height: '100%',
          padding: 0,
        }}
        headStyle={{
          height: '20%',
        }}
        bodyStyle={{
          height: '80%',
        }}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          }}>
          <div
            style={{
              height: '50%',
            }}>
            <Descriptions column={2}>
              <Descriptions.Item label="总租金">
                {data.rentalAll}元
              </Descriptions.Item>
              <Descriptions.Item label="总应收">
                {data.rentalAll}元
              </Descriptions.Item>
              <Descriptions.Item label="已收取">
                {data.prepaidRentalAll}元
              </Descriptions.Item>
              <Descriptions.Item label="待收取">
                {data.unpaidRentalAll}元
              </Descriptions.Item>
            </Descriptions>
          </div>
          <div
            id="rent"
            style={{
              height: '50%',
            }}></div>
        </div>
      </Card>
    </>
  )
}

export default Rent
